<template>
  <Card style="width:350px">
    <p slot="title">
      <Icon type="ios-film-outline"></Icon>
      Classic film
    </p>
    <a href="#" slot="extra" @click.prevent="changeLimit">
      <Icon type="ios-loop-strong"></Icon>
      Change
    </a>
    <ul>
      <li v-for="item in randomMovieList">
        <a :href="item.url" target="_blank">{{ item.name }}</a>
        <span>
                    <Icon type="ios-star" v-for="n in 4" :key="n"></Icon><Icon type="ios-star"
                                                                               v-if="item.rate >= 9.5"></Icon><Icon
          type="ios-star-half" v-else></Icon>
                    {{ item.rate }}
                </span>
      </li>
    </ul>
  </Card>
</template>
<script>
  export default {
    data () {
      return {
        movieList: [
          {
            name: 'The Shawshank Redemption',
            url: 'https://movie.douban.com/subject/1292052/',
            rate: 9.6
          },
          {
            name: 'Leon:The Professional',
            url: 'https://movie.douban.com/subject/1295644/',
            rate: 9.4
          },
          {
            name: 'Farewell to My Concubine',
            url: 'https://movie.douban.com/subject/1291546/',
            rate: 9.5
          },
          {
            name: 'Forrest Gump',
            url: 'https://movie.douban.com/subject/1292720/',
            rate: 9.4
          },
          {
            name: 'Life Is Beautiful',
            url: 'https://movie.douban.com/subject/1292063/',
            rate: 9.5
          },
          {
            name: 'Spirited Away',
            url: 'https://movie.douban.com/subject/1291561/',
            rate: 9.2
          },
          {
            name: 'Schindlers List',
            url: 'https://movie.douban.com/subject/1295124/',
            rate: 9.4
          },
          {
            name: 'The Legend of 1900',
            url: 'https://movie.douban.com/subject/1292001/',
            rate: 9.2
          },
          {
            name: 'WALL·E',
            url: 'https://movie.douban.com/subject/2131459/',
            rate: 9.3
          },
          {
            name: 'Inception',
            url: 'https://movie.douban.com/subject/3541415/',
            rate: 9.2
          }
        ],
        randomMovieList: []
      }
    },
    methods: {
      changeLimit () {
        function getArrayItems (arr, num) {
          const temp_array = []
          for (let index in arr) {
            temp_array.push(arr[index])
          }
          const return_array = []
          for (let i = 0; i < num; i++) {
            if (temp_array.length > 0) {
              const arrIndex = Math.floor(Math.random() * temp_array.length)
              return_array[i] = temp_array[arrIndex]
              temp_array.splice(arrIndex, 1)
            } else {
              break
            }
          }
          return return_array
        }

        this.randomMovieList = getArrayItems(this.movieList, 5)
      }
    },
    mounted () {
      this.changeLimit()
    }
  }
</script>
